<template>
	<view class="message-send-container">
		<view class="search">
			<view >发送的对象</view>
			<view class=""><input type="search" v-model="searchWord" placeholder="输入接收者电话号码"/></view>
			
			<uni-icons type="search" color="#55aaff" size="28" @click="search"></uni-icons>
			
		</view>
		<view class="page-title">发送消息</view>
		<!-- 接收者选择区域 -->

		<uni-list v-for="(item, index) in receiverList" :key="index">
			<uni-list :border="true" >
				<uni-list-chat :title="item.nicName" :avatar="item.nicPic.url" note="" time="2025-1-1" badge-positon="left" badge-text="" @click="toUser(index)" clickable="true"></uni-list-chat>
				<!-- 显示多头像 -->
			</uni-list>
		</uni-list>
		<!-- 消息内容输入区域 -->
		<view class="">发送信息给{{ receiver.userId }}</view>
		<view class="message-content">
		<input :disabled="Object.keys(receiver).length===0" v-model="content" type="text" placeholder="输入聊天内容"/>
		</view>
		<!-- 发送按钮 -->
		<view class="send-button">
			<button @click="sendMessage">发送</button>
		</view>
		<scroll-view scroll-y="true" v-for="(item,index) in msglist" :key="index">
			<image :src="item.nicPic||'' " mode="widthFix" style="width: 50rpx;height: 50rpx;"></image>
			<view>{{item.nicName||item.sendUserId}}</view>
			<view class="">{{item.content.text}}</view>
		</scroll-view>
	</view>
</template>

<script>
import webSocketModule from '@/utils/webSocket.js';
const db = uniCloud.databaseForJQL();

export default {
	data() {
		return {
			msglist:[],
			senduser: {},
			receiver: {},
			receiverList: [],
			content:"",
			searchWord:""
		};
	},
	beforeDestroy() {
		webSocketModule.closeWebSocket();
	},
	mounted() {
		uni.$on("msg",(res)=>{
			this.msglist.push(res.data[0])
		
		
		})
	},
	async onLoad(e) {
		try {
			this.senduser = JSON.parse(decodeURIComponent(e.user));
	
			await webSocketModule.connectWebSocket(this.senduser);
		} catch (error) {
			console.error('初始化出错:', error);
			uni.showToast({
				title: '初始化失败',
				icon: 'none'
			});
		}
		
	},
	methods: {
		search(){
			console.log("1");
				  this.initdata(this.searchWord)
		},
		async initdata(searchWord) {
			try {
				const res = await db.collection('linli-user').where({
					userId:searchWord
				}).get();
				console.log('9999',res);
				this.receiverList = res.data;
			} catch (error) {
				console.error('获取接收者列表出错:', error);
				uni.showToast({
					title: '获取接收者列表失败',
					icon: 'none'
				});
			}
		},

		toUser(e) {
		
					this.receiver = this.receiverList[e];
					console.log('this.receiver',JSON.stringify(this.receiver) );
		},
		// 发送消息方法
		async sendMessage() {
				try {
				const target = {
					targetType: '3',
					targetId: this.receiver.userId,
					targetName: this.receiver.nicName
				};
				const content = { text: this.content };
				console.log("444444",JSON.stringify(this.$store.state.user));
			const ismsg= await webSocketModule.sendMsg(2, target, content,this.$store.state.user);
		console.log(JSON.stringify(ismsg))
		if(!ismsg){
			return 
		}
				uni.showToast({
					title: '消息发送成功',
					icon: 'success'
				});
				this.content=""
			} catch (error) {
				console.error('发送消息出错:', error);
				uni.showToast({
					title: '消息发送失败',
					icon: 'none'
				});
			}
		}
	}

};
</script>

<style lang="scss" scoped>
.message-send-container {
	padding: 20rpx;
	background-color: #f5f7fa;
}

.page-title {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20rpx;
	color: #333;
}

.receiver-select {
	margin-bottom: 20rpx;
	background-color: #fff;
	padding: 20rpx;
	border-radius: 12rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.message-content {
	margin-bottom: 20rpx;
	background-color: #fff;
	padding: 20rpx;
	border-radius: 12rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.send-button {
	text-align: center;
}

.send-button button {
	padding: 12rpx 40rpx;
	background-color: #1989fa;
	color: #fff;
	border: none;
	border-radius: 8rpx;
	font-size: 30rpx;
	font-weight: 500;
	cursor: pointer;
}
.search {
  margin: 20rpx 30rpx;
  padding: 20rpx 30rpx;
  /* 完整的边框设置 */
  border: 2rpx solid #eee;
  /* 固定圆角值更适合搜索框 */
  border-radius: 60rpx;
  /* 盒模型：padding和border不影响元素总宽度 */
  box-sizing: border-box;
  /* 添加轻微过渡效果 */
  transition: all 0.2s ease;
  display: flex;
  gap: 30rpx;
}

/* 可选：添加焦点状态样式 */
.search:focus {
  outline: none;
  border-color: #ccc;
  box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
}
</style>
